﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        *{
            margin:0px;
            padding:0px;
        }
        div{
            width:100%;
            height:850px;
            background:#000000;
            position:relative;
        }
        img{
            position:absolute;
        }
        span{
            position:absolute;
            width:10px;
            height:20px;
            background:#ff0000;
            z-index:1;
            border-radius:5px 5px 0 0;
            transition:all 1s linear ;
        }
    </style>
</head>
<body>
    
    <div>
    
       
    <img src="bd.png" alt="Alternate Text" /></div>
    <script>
        let div = document.querySelector(`div`);
        let img = document.querySelector(`img`);
        let span = document.querySelector(`span`)
        
           
                div.onmousemove = function (e) {
                var x = div.getBoundingClientRect().x;
                var y = div.getBoundingClientRect().y;
                var l = e.clientX - x - img.offsetWidth / 2;
                var t = e.clientY - y - img.offsetWidth / 2;
                l= l < 0 ? 0 : l;
                t= t < 0 ? 0 : t;
                maxh = div.offsetHeight - img.offsetHeight;
                maxw = div.offsetWidth - img.offsetWidth;
                t= t > maxh ? maxh : t;
                l = l > maxw ? maxw : l;
                
                img.style.left = `${l}px`;
               
                img.style.top = `${t}px`;
                
            }
            
      
        setInterval(function () {
            var span = document.createElement(`span`);

            var { x, y } = img.getBoundingClientRect();
           
            let st = y  - 20;
            let sl = x + img.offsetWidth / 2 - 5;
            span.style.top = `${st}px`;
            span.style.left = `${sl}px`;
            div.appendChild(span);
            
            setTimeout(function () {
                span.style.top = `-40px`;
                /* div.removeChild(span);*/
            }, 100)
            setTimeout(function () {
                /*span.style.top = `-40px`;*/
                div.removeChild(span);
            }, 1000)
        }, 200)
    </script>
</body>
</html>